// 主体部分
.main {
    overflow-y: scroll;
    // 轮播图
    .swiper {
        .swiper-container {
            width: 414px;
            height: 200px;

            img {
                width: 100%;
                height: 100%;
            }

            .swiper-pagination {
                color: #fff;
            }
        }
    }

    // 主要内容
    .content {
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 20px 15px 0;

        .box1 {
            width: 150px;
            height: 150px;
            background: #54afda;
            border-radius: 15px;
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            img{
                width: 121px;
                height: 121px;
                position: absolute;
                left: -15px;
                bottom: -2px;
            }
            .today{
                position: absolute;
                top: 15px;
                left: 14px;
                color: #004e73;
                font-size: 20px;
                font-weight: bold;
            }
            .number1{
                height: 112px;
                line-height: 112px;
                font-size: 60px;
                font-family: "PingFangSC-bold";
                color: #fff;
                position: absolute;
                right: 15px;
                bottom: 0;
            }
        }

        .box2 {
            width: 212px;
            height: 150px;
            background: #9fd9f8;
            border-radius: 15px;
            margin-bottom: 20px;
            position: relative;
            img{
                width: 110px;
                height: 110px;
                position: absolute;
                left: 10px;
                bottom: 10px;
            }
            .accrue{
                position: absolute;
                top: 15px;
                left: 15px;
                color: #005177;
                font-size: 20px;
                font-weight: bold;
            }
            .cord{
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                position: absolute;
                right: 15px;
                bottom: 25px;
                border: 3px solid #005177;
                border-radius: 20px;
                font-family: 'Arial';
                color: #116085;
            }
            .corded{
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                position: absolute;
                right: 15px;
                bottom: 25px;
                border: 3px solid #005177;
                border-radius: 20px;
                font-family: 'Arial';
                color: #fff;
                background: #116085;
            }
        }

        .box3 {
            width: 180px;
            height: 110px;
            background: url('../../assets/imgs/index-card-data.png') center/cover;
            border-radius: 15px;
            margin-bottom: 20px;
            position: relative;
            .sport1{
                color: #fff;
                font-size: 16px;
                position: absolute;
                top: 12px;
                left: 14px;
                font-family: 'PingFangSC-regular';
            }
            
        }

        .box4 {
            width: 185px;
            height: 110px;
            background: #9dbde3;
            border-radius: 15px;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
            img{
                width: 90px;
                height: 90px;
                position: absolute;
                bottom: 0;
                left: 10px;
            }
            .badge{
                font-weight: bold;
                color: #005177;
                font-size: 16px;
                position: absolute;
                left: 14px;
                top: 12px;
            }
            .number2{
                height: 112px;
                line-height: 112px;
                position: absolute;
                top: 6px;
                right: 14px;
                color: #004e73;
                font-weight: bold;
                font-size: 18px;
                .number21{
                    font-size: 60px;
                }
            }
        }

        .box5 {
            width: 385px;
            height: 110px;
            background: url('../../assets/imgs/course-img04.jpg') top/cover;
            border-radius: 15px;
            margin-bottom: 20px;
            position: relative;
            .exercise{
                position: absolute;
                left: 15px;
                top: 13px;
                color: #fff;
                border-width: bold;
                font-size: 16px;

            }
        }

        .box6 {
            width: 385px;
            height: 110px;
            background: url('../../assets/imgs/index-card-run.png') center/cover;
            border-radius: 15px;
            margin-bottom: 20px;
            position: relative;
            .run{
                position: absolute;
                left: 15px;
                top: 13px;
                color: #fff;
                border-width: bold;
                font-size: 16px;
            }
        }
    }

}